<script setup lang="ts">
import { Notebook } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
import router from "@/router";
defineOptions({
  name: ""
});
const handleAdd = () => {};
const ruleFormRef = ref<FormInstance>();
const form = ref({
  name: "",
  customer: "",
  year: "",
  status: "",
  customerName: "",
  projectLeader: ""
});
const statusOptions = [
  { label: "进行中", value: "1", type: "primary" },
  { label: "已完成", value: "2", type: "success" },
  { label: "待审批", value: "4", type: "warning" },
  { label: "草稿", value: "3", type: "info" }
];
const statusObject = statusOptions.reduce((accumulator, currentValue) => {
  accumulator[currentValue.value] = currentValue;
  return accumulator;
}, {});
console.log(statusObject);
const onSubmit = () => {};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const tableData = [
  {
    name: "2022年度市级公益创投项目",
    year: "2022-01-02至2022-10-10",
    customer1: "政府",
    customer: "XXXX民政",
    status: "1",
    createTime: "2022-01-01 12:00:00",
    org: "孙小小"
  },
  {
    name: "杭州青青草公益服务中心 ",
    year: "2023-01-02至2023-10-10",
    customer1: "政府",
    customer: "XXXX民政",
    status: "2",
    createTime: "2023-01-01 12:00:00",
    completeTime: "2023-10-09 11:11:12",
    org: "孙小小"
  },
  {
    name: "2024年度市级公益创投项目",
    year: "2024-01-02至2024-10-10",
    customer: "XXXX民政",
    customer1: "政府",
    status: "3",
    org: "--"
  },
  {
    name: "2024年度市级公益创投项目",
    year: "2024-04-02至2024-10-10",
    customer: "XXXX基金会",
    customer1: "基金会",
    status: "4",
    createTime: "2023-01-01 12:00:00",
    updateTime: "--",
    completeTime: "--",
    org: "孙小小"
  }
];
function repeatAndShuffle(arr, n) {
  const result = [];
  for (let i = 0; i < n; i++) {
    result.push(...arr.slice().sort(() => Math.random() - 0.5));
  }
  return result;
}
const tableData1 = repeatAndShuffle(tableData, 3);
const columns: TableColumnList = [
  {
    label: "项目名称",
    prop: "name",
    align: "center",
    minWidth: 180,
    showOverflowTooltip: true,
    slot: "name"
  },
  {
    label: "项目周期",
    prop: "year",
    align: "center",
    minWidth: 180
  },
  {
    label: "资方类型",
    prop: "customer",
    align: "center",
    showOverflowTooltip: true
  },
  {
    label: "资方",
    prop: "customer1",
    align: "center",
    showOverflowTooltip: true
  },
  {
    label: "状态",
    prop: "status",
    slot: "status1",
    align: "center"
  },
  {
    label: "完成时间",
    prop: "completeTime",
    width: "180",
    align: "center"
  },
  {
    label: "负责人",
    prop: "org",
    align: "center"
  },
  {
    label: "操作",
    width: "160",
    fixed: "right",
    slot: "operation"
  }
];
/** 分页配置 */
const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: tableData1.length,
  align: "right",
  background: true,
  small: false
});
import { ElMessage, ElMessageBox } from "element-plus";

const delClick = row => {
  ElMessageBox.confirm(`是否删除【${row.name}】, 是否继续?`, "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功!"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除"
      });
    });
};
</script>

<template>
  <el-card class="m-[20px]">
    <template #header>
      <div class="flex items-center justify-between card-header">
        <span>项目管理</span>
        <el-button
          type="primary"
          :icon="Notebook"
          @click="router.push({ name: 'projectInfo' })"
          >创建项目</el-button
        >
      </div>
    </template>
    <el-form :inline="true" :model="form" label-width="90px" ref="ruleFormRef">
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入项目名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="资方类别" prop="customer">
        <el-select
          v-model="form.customer"
          placeholder="请选择资方类别"
          clearable
        >
          <el-option label="政府" value="政府"></el-option>
          <el-option label="基金会" value="基金会"></el-option>
          <el-option label="社会组织" value="社会组织"></el-option>
          <el-option label="慈善信托" value="慈善信托"></el-option>
          <el-option label="企业" value="企业"></el-option>
          <el-option label="个人" value="个人"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资方名称">
        <el-input
          v-model="form.customerName"
          placeholder="请输入资方名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人">
        <el-select
          v-model="form.projectLeader"
          placeholder="请选择负责人"
          clearable
        >
          <el-option label="赵六" value="赵六"></el-option>
          <el-option label="钱七" value="钱七"></el-option>
          <el-option label="孙八" value="孙八"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="year">
        <el-date-picker
          v-model="form.year"
          type="daterange"
          range-separator="至"
          style="width: 220px"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          clearable
          placeholder="请选择时间"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <el-button @click="resetForm(ruleFormRef)">重置</el-button>

    <pure-table
      class="mt-[20px]"
      :data="tableData1"
      :columns="columns"
      stripe
      border
      :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa'
      }"
      :pagination="pagination"
    >
      <template #name="{ row }">
        <el-text
          type="primary"
          class="cursor-pointer"
          @click="router.push({ name: 'sponsorDetails' })"
          >{{ row.name }}</el-text
        >
      </template>
      <template #status1="{ row }">
        <el-tag :type="statusObject[row.status].type"
          >{{ statusObject[row.status].label }}
        </el-tag>
      </template>
      <template #operation="{ row }">
        <el-button
          type="primary"
          link
          @click="router.push({ name: 'sponsorDetails' })"
          >详情</el-button
        >
        <el-button
          type="primary"
          link
          @click="router.push({ name: 'projectInfo' })"
        >
          编辑</el-button
        >
        <el-button type="primary" link @click="delClick(row)">删除</el-button>
      </template>
    </pure-table>
  </el-card>
</template>

<style lang="scss" scoped>
.el-select {
  --el-select-width: 220px;
}
.el-input {
  --el-input-width: 220px;
}
</style>
